<template>
  <el-dialog
    :center="true"
    :visible.sync="isVisibleEditAvatarDialog"
    width="800"
    :show-close="false"
    :close-on-press-escape="false"
    @close="close"
  >
    <el-steps slot="title" :active="stepActive" finish-status="success" simple>
      <el-step title="Choose Labels"></el-step>
      <el-step title="Upload Img, Fill DID"></el-step>
      <el-step title="Login"></el-step>
    </el-steps>
    <transition-group>
      <div class="labelWrapper" key="label" v-if="stepActive === 1">
        <el-row>
          <el-col>
            <Search @on-search="onSearch" />
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <SvgCloud :labels="interestLabels" />
            <!-- <div class="list">
              <ul>
                <li
                  :style="{ color: item.color }"
                  class="listItem"
                  :class="item.isChoose ? 'active' : ''"
                  @click="listItemClick(item, index)"
                  v-for="(item, index) in interestLabels"
                  :key="index"
                >{{ item.label }}</li>
              </ul>
            </div>-->
          </el-col>
        </el-row>
      </div>
      <div class="uploadImg" key="img" v-if="stepActive === 2">
        <el-form ref="form" label-position="left" :model="form">
          <el-form-item label="Upload Image">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="Fill In DName">
            <input />
          </el-form-item>
        </el-form>
      </div>
    </transition-group>
    <div slot="footer" class="btnClass">
      <el-button
        @click="next"
        :disabled="!choosenLabels.length"
        v-if="!(stepActive === 3)"
        type="text"
      >Next</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component } from 'nuxt-property-decorator'
import { BaseVue } from '@/plugins/base-vue'
import SVGCloud from '../svgCloud/index.vue'
@Component({
  components: {
    SVGCloud,
  },
})
export default class MyLabel extends BaseVue {
  isVisibleEditAvatarDialog = false

  // 兴趣标签
  interestLabels = [
    {
      label: 'Defi',
      value: 'Defi',
      color: '',
      isChoose: false,
    },
    {
      label: 'NFT',
      value: 'NFT',
      color: '',
      isChoose: false,
    },
    {
      label: 'Finance',
      value: 'Finance',
      color: '',
      isChoose: false,
    },
    {
      label: 'Web3',
      value: 'Web3',
      color: '',
      isChoose: false,
    },
    {
      label: 'ETH',
      value: 'ETH',
      color: '',
      isChoose: false,
    },
    {
      label: 'BTC',
      value: 'BTC',
      color: '',
      isChoose: false,
    },
    {
      label: 'SOL',
      value: 'SOL',
      color: '',
      isChoose: false,
    },
    {
      label: 'Socail',
      value: 'Socail',
      color: '',
      isChoose: false,
    },
    {
      label: 'Stake',
      value: 'Stake',
      color: '',
      isChoose: false,
    },
    {
      label: 'Lending',
      value: 'Lending',
      color: '',
      isChoose: false,
    },
    {
      label: 'Borrow',
      value: 'Borrow',
      color: '',
      isChoose: false,
    },
    {
      label: 'Market',
      value: 'Market',
      color: '',
      isChoose: false,
    },
    {
      label: 'ADA',
      value: 'ADA',
      color: '',
      isChoose: false,
    },
    {
      label: 'Metamask',
      value: 'Metamask',
      color: '',
      isChoose: false,
    },
    {
      label: 'GameFi',
      value: 'GameFi',
      color: '',
      isChoose: false,
    },
    {
      label: 'Meta',
      value: 'Meta',
      color: '',
      isChoose: false,
    },
    {
      label: 'DOT',
      value: 'DOT',
      color: '',
      isChoose: false,
    },
    {
      label: 'KSM',
      value: 'KSM',
      color: '',
      isChoose: false,
    },
  ]

  disabled = true
  stepActive = 1

  imageUrl = ''

  choosenLabels: any[] = []

  getInterestLabels() {
    this.interestLabels.forEach((item: any) => {
      item.color = this.getRandomColor()
    })
    return this.interestLabels
  }

  getRandomColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16)
  }

  listItemClick(item: any, index: number) {
    item.isChoose = !item.isChoose
    if (item.isChoose) {
      this.choosenLabels.push(item)
    } else {
      this.choosenLabels = this.choosenLabels.filter((item) => item.isChoose)
    }
  }

  next() {
    this.stepActive++
    if (this.stepActive === 3) {
    }
  }

  close() {
    this.$emit('close')
  }

  handleAvatarSuccess(res: any, file: any) {
    this.imageUrl = URL.createObjectURL(file.raw)
  }
  beforeAvatarUpload(file: any) {}

  onSearch(val: any) {
    console.log('val', val)
  }

  created() {
    this.getInterestLabels()
  }
}
</script>

<style  lang="scss" scoped>
.uploadImg {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  input {
    transition: all 0.5s;
    text-indent: 10px;
    margin-left: 10px;
    outline: none;
    border: none;
    height: 40px;
    color: #fff;
    background: #171821;
    width: 178px;
    border: 1px solid #fff;
    border-radius: 4px;
    //::-webkit-input-placeholder/* WebKit, Blink, Edge */
    //:-moz-placeholder/* Mozilla Firefox 4 to 18 */
    //::-moz-placeholder  /* Mozilla Firefox 19+ */
    //:-ms-input-placeholder /* Internet Explorer 10-11 */
    //::-ms-input-placeholder  /* Microsoft Edge */
    &::placeholder,
    &::-webkit-input-placeholder,
    &:-moz-placeholder,
    &::-moz-placeholder,
    &:-ms-input-placeholder,
    &::-ms-input-placeholder {
      color: rgba(71, 75, 84, 1);
      font-size: 16px;
    }

    &:focus {
      border: 1px solid #03e9f4;
    }
  }

  ::v-deep .el-form-item {
    display: flex;
    margin-bottom: 22px;
    align-items: center;
  }
}
.avatar-uploader ::v-deep .el-upload {
  margin: 0 auto;
  border: 2px dashed #fff;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #03e9f4;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #fff;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;

  &:hover {
    color: #03e9f4;
  }
}
.avatar {
  border-radius: 50%;
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep .el-dialog--center .el-dialog__body {
  padding: 0px 25px 28px;
}

::v-deep .el-dialog__header {
  padding: 20px;
}

::v-deep .el-steps {
  background-color: #000000;

  .el-step__head.is-success {
    color: #03e9f4;
    border-color: #03e9f4;
  }

  .el-step__title.is-success {
    color: #03e9f4;
  }

  .el-step__arrow::before {
    color: #03e9f4;
  }

  .el-step__arrow::after {
    color: #03e9f4;
  }
}

::v-deep .el-dialog {
  background-color: #2b3036;

  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
    }
  }
}

::v-deep .search {
  margin-left: 0;

  input {
    width: 100%;
  }
}

.list {
  height: 400px;
  overflow-y: auto;
  padding: 50px;
  margin-top: 10px;

  ul {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;

    li {
      border: 1px solid #d7eafb;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border-radius: 50%;
      margin-bottom: 70px;
      font-size: 16px;
      box-shadow: 0 4px 8px 0 #fefafb;
      transition: all 0.5s;
      &:hover {
        transform: scale(1.1, 1.1);
      }

      cursor: pointer;

      &.active {
        background-color: #5a6579;
        border: 1px solid #5a6579;
        color: #fff !important;
      }
    }
  }
}
.btnClass {
  text-align: center;
}
</style>
